<template>
	<div class="list">
		<!-- <el-tooltip :content="item.title"> -->
		<div class="list-item" v-for="(item,key) in list" :title="item.title">
			<div class="list-item-left">
				<span>{{item.title}}</span>
			</div>
			<div class="list-item-right">
				<el-tag :title="item.bage" :style="`border: none;color: ${item.textColor};`" effect="dark" :color="item?.color" :hit="false" round>
					{{ item.bage }}
				</el-tag>
			</div>
		</div>
		<!-- </el-tooltip> -->
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	defineProps({
		list: {
			type: Array,
			default: []
		}
	});
</script>

<style scoped lang="scss">
	.list {
		&-item {
			display: flex;
			justify-content: space-between;
			cursor: pointer;
			padding: 8px 0;
			color: rgba(0, 0, 0, .65);
			border-bottom: 1px solid #eee;
			transition: 0.2s;
		}

		&-item:first-child {
			padding-top: 0;
		}
	}
</style>